.screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-image: url("@/assets/images/screen/home_bg.png");
  }

  .screen-content {
    width: 1678px;
    height: 946px;
    box-sizing: border-box;
    // padding: 12px;
    background-image: url("@/assets/images/screen/home_bg.png");
    transition: all 0.2s ease-in-out;

    :deep(.vue-grid-item) {
      // background-image: url("@/assets/images/screen/preview(1).png");
      // background-repeat: no-repeat;
      // background-position: bottom;
      // background-size: cover;
    }

    :deep(canvas) {
      image-rendering: optimizeQuality; /* 或者使用 -webkit-optimize-contrast, optimizeSpeed 等 */
    }

    // to.meta.title = to.query?.viewlet;

    .element {
      background: linear-gradient(
        to right,
        rgba(0, 123, 255, 0.7),
        rgba(47, 150, 255, 0.7)
      );
    }
    :deep(.card_class) {
      background-color: transparent;
      // background-color: rgba(88, 175, 255, 0.13);
      // background-repeat: no-repeat;
      // background-position: center;
      // background-size: cover;
      // preview (4).png
      background: linear-gradient(
        to top,
        rgba(0, 123, 255, 0.2),
        rgba(47, 150, 255, 0.08)
      );

      .el-radio-button__inner {
        background-color: transparent;
        color: #fff;
        border: 1px solid rgba(0, 123, 255, 0.7);
        font-size: 14px;
      }
      .el-input__wrapper {
        background-color: transparent;
        color: #fff;
        box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.7) inset;
      }
      .el-input__inner {
        color: #fff;
      }

      .card_title {
        white-space: nowrap;
        font-size: 22px;
        color: #fff;
        background-image: url("@/assets/images/screen/bg-title.png") !important;
        background-repeat: no-repeat;
        // background-size: cover;
        background-position: left;
        padding: 0 20px 0 30px;
        margin-bottom: 15px;
        background-size: auto 100%;
        span {
          word-spacing: 0px;
          writing-mode: horizontal-tb;
          text-orientation: upright;
          color: transparent;
          background: linear-gradient(
              0deg,
              rgb(88, 175, 255) 0px,
              rgb(255, 255, 255) 100%
            )
            text;
          clip-path: inset(1px);
        }
      }
    }
    :deep(.el-card) {
      background-color: transparent;
      border: none;
      .el-card__header {
        background: rgba(212, 219, 249, 0.1);
        border-bottom: none;
        color: white;
        .el-card-title {
          color: white;
        }
      }
    }

    .title {
      width: 100%;
      height: auto;
      width: 100%;
      line-height: 60px;
      .text {
        font-size: 32px;
        padding-left: 50px;
        font-family: YOUSHE;
        writing-mode: horizontal-tb;
        text-orientation: upright;
        color: transparent;
        background: linear-gradient(
            0deg,
            rgb(255, 255, 255) 0px,
            rgb(255, 255, 255) 100%
          )
          text;
        clip-path: inset(1px);
      }
    }
    .bgchart {
      height: 100%;
      height: 100%;
    }
    .bgchart2 {
      background-image: url(@/assets/images/bg3.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }

    .loading-title {
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }
}

.screen_back {
  height: 100%;
  // background: url("@/assets/images/screen/pageBg1.png") center center / 100%
  //   100% no-repeat;
}
:deep(.el-select__popper.el-popper) {
  background: rgba(0, 123, 255, 0.2) !important;
}
:deep(.top-wrap .el-input__wrapper) {
  background-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.836) inset;
}
:deep(.top-wrap .el-input__inner) {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
:deep(.el-select .el-input .el-select__caret) {
  color: #fff;
  font-size: 16px;
}
